<template>
<div class="home">
    <!-- 首页搜索栏 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @click="add()"
    />
    <!-- 轮播图 -->
<div v-show="$route.path=='/home'">
<!-- 防止别的页面出现 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="5">
          <van-grid-item
            v-for="item in channel"
            :key="item.id"
            :icon="item.icon_url"
            :text="item.name"
          />
        </van-grid>
    <!-- <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid> -->


    <!-- 品牌制造商直供 -->
     
    <div class="brand">
      <h4>品牌制造商直供</h4>
    <van-row type="flex" justify="space-between"  gutter="8" >
      <van-col span="12" v-for="item in brandList" :key="item.id">
           <img :src="item.pic_url" alt="">
            <div class="brandspan">
                <span>{{ item.name }}</span>
                <p>{{ item.floor_price | RMBFormat }}</p>
              </div>
      </van-col>
    </van-row>
    </div>

   <!-- 新品首发 -->
     <div class="brand">
      <h4>周一周四·新品首发</h4>
    <van-row type="flex" justify="space-between"  gutter="8" >
      <van-col span="12" v-for="item in newGoodsList" :key="item.id">
           <img :src="item.list_pic_url" alt="">
            <div class="newGoodsList">
                <span class="van-ellipsis">{{ item.name }}</span>
                <p>{{ item.retail_price | RMBFormat }}</p>
              </div>
      </van-col>
    </van-row>
    </div>

  <!-- 人气推荐 -->
     <div class="brand">
      <h4>人气推荐</h4>
    <van-row type="flex" justify="space-between"  gutter="8" >
      <van-col span="24" v-for="item in hotGoodsList" :key="item.id">
           <div class="hotGoodsList">
             <img :src="item.list_pic_url" alt="">
            <div class="su">
                <div class="van-ellipsis bt">{{ item.name }}</div>
                <div class="van-ellipsis xbt">{{ item.goods_brief }}</div>
                <p>{{ item.retail_price | RMBFormat }}</p>
              </div>
           </div>
      </van-col>
    </van-row>
    </div>

<!-- 专题精选 -->
      <div class="jinxuan">
         <p class="p2">专题精选</p>
       <van-swipe :loop="false" :width="300" :height="266" :show-indicators='false'>
         <van-swipe-item v-for="item in topicList" :key="item.id" >
           <img :src="item.scene_pic_url" alt="">
           <p ><span >{{item.title}}</span> &nbsp;&nbsp;<span>{{ item.price_info | RMBFormat }}...</span></p>
           <p  class="van-ellipsis p1">{{item.subtitle}}</p>
         </van-swipe-item>
       </van-swipe>
      </div>


      <!-- 商品列表 -->
     
      <div class="splb" v-for="item in categoryList" :key="item.id">
      <h4>{{item.name}}</h4>
    <van-row type="flex" justify="space-between"  gutter="8" >
      <van-col span="12" v-for="item2 in item.goodsList" :key="item2.id">
           <img :src="item2.list_pic_url" alt="">
            <div class="newGoodsList">
                <span class="van-ellipsis">{{ item2.name }}</span>
                <p>{{ item2.retail_price | RMBFormat }}</p>
              </div>
      </van-col>
    </van-row>
     </div>
</div>
<!-- 遮罩层和占位符 底部的-->
    <transition name="van-fade">
      <div class="zezhao" v-show="inShowShadow"></div>
    </transition>
    <transition name="slide">
      <router-view />
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/comp1.vue";
import { GetHomeData } from "@/request/api.js";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      value: "",
      banner: [],
      channel:[],
      brandList:[],
      newGoodsList:[],
      hotGoodsList:[],
      topicList:[],
      categoryList:[],
    };
  },
  computed: {
    ...mapState({
      inShowShadow: (state) => state.inShowShadow.inShowShadow,
    }),
  },
  watch:{
    // 这不是路由守卫 这是用来监听父子级关系的路由切换
    $route(to,from){
   if(to.path==='/home'){
  this.chaninShowShadow(false)
      }
    }
  },
  methods: {
    ...mapMutations({
      chaninShowShadow: "inShowShadow/chaninShowShadow",
    }),
    add() {
      this.$router.push("/home/popup");
      this.chaninShowShadow(true);
    },
  },
  created() {
    GetHomeData()
      .then((res) => {
        console.log(res.data.categoryList);
        let { banner,channel,brandList,newGoodsList,hotGoodsList,topicList ,categoryList} = res.data;
        this.banner = banner;
        this.channel=channel;
        this.brandList=brandList
        this.newGoodsList=newGoodsList
        this.hotGoodsList=hotGoodsList
        this.topicList=topicList
        this.categoryList=categoryList
      })
      .catch((err) => {
        console.log(err);
      });
     
  },
};
</script>
<style lang="less" scoped>
.home{
  z-index: 1;
}
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
.zezhao {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
}
.brand {
  margin-top: 0.2rem;
  background-color: #fff;
  .newGoodsList{
  text-align: center;
  p {
      margin-top: 0.1rem;
      color: #97004e;
    }
  }
  .hotGoodsList{
    background-color: #fafafa;
    margin:10px 0;
    display: flex;
    img{
     width: 30%;
    }
    .su{
    width: 70%;
    text-align: left;
    div{
      margin: 15px 0;
    }
    .bt{
      font-size: 18px;
    }
    .xbt{
      font-size: 12px;
    }
    p{
      font-size: 12px;
      margin: 15px 0;
      color: #97004e;
    }
    }
  }
  h4 {
    text-align: center;
    font-size: 0.2rem;
    line-height: 0.5rem;
  }
  .van-col {
    position: relative;
  }
  img {
    width: 100%;
  }
  .brandspan {
    font-size: 0.14rem;
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    p {
      margin-top: 0.125rem;
      color: #97004e;
    }
    
  }
}
.jinxuan{
  background-color: #fff;
  margin: 20px 0;
  padding: 0 8px;
  .p2{
    text-align: center;
    font-size: 20px;
    padding-top: 20px;
 
  }
 .van-swipe-item{
   margin-right: 10px;
 }
  p{
    margin: 10px 0;
    text-align: left;
  }
   .p1{
      font-size: 14px;
      margin: 10px 0;
    }
  img{
    width: 100%;height: 200px;
  }
}

.splb{
  background-color: #fff;
  text-align: center;
  padding-bottom: 100px;
h4{
  padding-top: 50px;
   margin-bottom: 20px;
  font-size: 20px;
}
img{
  width: 100%;
}
div{
  font-size: 14px;
  p{
    margin: 10px 0;
      color: #97004e;
  }
  span{
    display: inline-block;
      width: 150px;
  }
}
}
</style>
